<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级会员-滴答清单</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/upgrade.css">
</head>

<body>
    <!-- 顶部导航 headerContainer-->
    <div class="headerContainer black">
        <div class="warpper nav">
            <img src="./common-img/logo-alter.png" alt="">
            <ul class="navbar">
                <li class="navItem">
                    <a href="#">功能介绍</a>
                </li>
                <li class="navItem">
                    <a href="#">下载应用</a>
                </li>
                <li class="navItem">
                    <a href="#" class="active">高级会员</a>
                </li>
                <li class="navItem">
                    <a href="#">帮助中心</a>
                </li>
                <li class="navItem">
                    <a href="#">登录</a>
                </li>
                <li>
                    <a href="#" id="nav-lc-a">创建免费账号</a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 主部 -->
    <main>

        <!-- 顶上部布局 -->
        <div class="top-1">
            <!-- 顶上部背景 -->
            <div class="bac">

            </div>
            <h2>
                高级会员
            </h2>
            <h5>
                在所有平台上享有20项高级功能、10倍清单和任务数量，助您实现更多目标和可能。
            </h5>
            <button>
                现在就升级
            </button>
            <p>
                一年高级会员只需￥139（每月仅￥11.6）
            </p>
        </div>

        <!-- 中部功能盒子 -->
        <div class="mid container">
            <div class="item-1">
                <div class="left">
                    <h4>
                        像日历一样使用滴答清单
                    </h4>
                    <p>
                        不仅提供月视图和时间轴视图展示任务，还支持为任务设置开始时间和结束时间，甚至，您可以将其他日历订阅到滴答清单。
                    </p>
                </div>
                <div class="right">
                    <img src="https://cncdn.dida365.com/sites/res/aboutUpgrade/dida/feature/grid-calendar.png">
                </div>
            </div>
            <div class="item-2">
                <div class="left">
                    <img src="https://cncdn.dida365.com/sites/res/aboutUpgrade/dida/feature/smart-list.png">
                </div>
                <div class="right">
                    <h4>
                        按你的方式组织所有事情
                    </h4>
                    <p>
                        除了支持更多清单与任务，您还可以过滤器并自定义筛选规则，按您自己的方式组织所有事情。
                    </p>
                </div>
            </div>
            <div class="item-3">
                <div class="left">
                    <h4>
                        10倍扩容，扫清收集障碍
                    </h4>
                    <p>
                        299个清单、每个清单999个任务、每个任务199个检查事项...任何工作、备忘、想法或灵感，您都可以随时记录。
                    </p>
                    <a id="item-3-a">
                        了解详情
                    </a>
                </div>
                <div class="right">
                    <img src="https://cncdn.dida365.com/sites/res/aboutUpgrade/dida/feature/limit.png">
                </div>
            </div>
            <div class="item-4">
                <div class="left">
                    <img src="https://cncdn.dida365.com/sites/res/aboutUpgrade/dida/feature/t-activity.png">
                </div>
                <div class="right">
                    <h4>
                        一切操作都有迹可循
                    </h4>
                    <p>
                        无论是日常回顾历史修订版本，还是了解团队项目进度，您都可以查看每个清单和任务的动态。
                    </p>
                </div>
            </div>
            <div class="item-5">
                <div class="left">
                    <h4>
                        了解自己的进步轨迹
                    </h4>
                    <p>
                        您可以查看过去几个周期的历史统计数据，来了解自己的效率变化和习惯，更好的督促自己达成目标。
                    </p>
                </div>
                <div class="right">
                    <img src="https://cncdn.dida365.com/sites/res/aboutUpgrade/dida/feature/statistics.png">
                </div>
            </div>
        </div>

        <!-- 下上部更多功能盒子 -->
        <div class="bottom-top container">
            <h3>
                更多功能，更多可能
            </h3>
            <ul>
                <li>
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-alarm-fill" viewBox="0 0 16 16">
                            <path
                                d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zm2.5 5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z" />
                        </svg>
                        <h5>
                            检查事项提醒
                        </h5>
                    </div>
                    <p>
                        检查事项提醒帮助您记住所有的事情，即便它只是一个小小的执行步骤。
                    </p>
                </li>
                <li>
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-calendar-fill" viewBox="0 0 16 16">
                            <path
                                d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5h16V4H0V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5z" />
                        </svg>
                        <h5>
                            日历小部件
                        </h5>
                    </div>
                    <p>
                        滴答清单关心您的每一分钟，即便是碎片时间也能充满价值。不管何时何地，您只需要将日历小部件放在桌面，所有事情即刻呈现。
                    </p>
                </li>
                <li>
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                            <path
                                d="M42.73 18.494c1.982.468 3.902 1.472 5.895 3.503a15.122 15.122 0 012.088 2.66L32.97 42.399c-.347.347-.621.76-.807 1.213l-.085.23-1.649 4.946a2.462 2.462 0 002.952 3.162l.162-.048 4.946-1.649a3.69 3.69 0 001.264-.724l.179-.168 13.19-13.19c-.968 11.505-10.48 18.803-22.073 18.803-12.234 0-22.154-8.131-22.154-20.756 0-5.238 1.701-9.29 4.581-12.222 1.991-2.028 3.909-3.033 5.886-3.5-.768.761-2.937 5.923-2.016 9.76 2.868-2.959 7.968-7.016 13.701-7.018 5.733.002 10.833 4.057 13.701 7.018.921-3.84-1.25-9.004-2.018-9.762zm14.194 6.914c.961.961.961 2.52 0 3.481L38.989 46.824a.826.826 0 01-.245.169l-5.677 2.543a.206.206 0 01-.271-.271l2.543-5.677a.826.826 0 01.169-.245l17.935-17.935a2.462 2.462 0 013.481 0zM30.558 10.667l4.426 1.637s-2.383.766-2.597 2.831c.692-.286 1.716-.468 3.397-.468 5.275 0 7.948-2.782 7.948-2.782s-.859 4.02-3.857 5.354c-.448.199-1.026.382-1.652.551 2.225 1.866 3.065 4.507 3.065 4.507-1.925-1.817-6.196-3.535-10.294-3.535-4.096 0-8.367 1.718-10.294 3.535 0 0 .847-2.663 3.094-4.532-.591-.162-1.14-.337-1.566-.527-2.998-1.334-3.857-5.354-3.857-5.354s2.671 2.782 7.946 2.782c1.351 0 2.267.121 2.939.315.03-2.372.101-3.827 1.302-4.314z"
                                fill-rule="evenodd" clip-rule="evenodd" fill="#fb8142"></path>
                        </svg>
                        <h5>
                            预计番茄
                        </h5>
                    </div>
                    <p>
                        为任务设置预计番茄，以便更好的感知每一项任务可能耗费的时长。您还能对比预计番茄与实际获得番茄来了解自己的工作效率。
                    </p>
                </li>
                <li>
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                            <path
                                d="M58.3 23v7.8c0 2.5-2 4.5-4.5 4.5H37.3c-1.1 0-2.1.9-2.1 2.1v6.2h1.6v8.6c0 1.6-1.3 2.9-2.9 2.9S31 53.8 31 52.2v-8.6h1.6v-6.2c0-2.5 2-4.5 4.5-4.5h16.4c1.1 0 2.1-.9 2.1-2.1V23h2.7zM17.2 36.9c3.8 4.6 5.7 7.9 5.7 10 0 3.1-2.6 5.6-5.7 5.6s-5.7-2.5-5.7-5.6c0-2.1 1.9-5.4 5.7-10zm36.1-25.4v18.1H13.9V11.5h39.4z"
                                fill-rule="evenodd" clip-rule="evenodd" fill="#fb8142"></path>
                        </svg>
                        <h5>
                            会员共享主题
                        </h5>
                    </div>
                    <p>
                        滴答清单希望您每天都有美妙的心情，除了实用的功能和流畅的体验，也为您带来了新鲜好看的会员专享主题。
                    </p>
                </li>
                <li>
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                            <path
                                d="M52.5 47.7c0 4.2-3.4 7.7-7.7 7.7s-7.7-3.4-7.7-7.7 3.4-7.7 7.7-7.7c.9 0 1.8.2 2.6.4V19.2l-20.5-2.1v25.4c0 4.2-3.4 7.7-7.7 7.7s-7.7-3.4-7.7-7.7 3.4-7.7 7.7-7.7c.9 0 1.8.2 2.6.4V11.5l30.8 3.1v33.1h-.1z"
                                fill-rule="evenodd" clip-rule="evenodd" fill="#fb8142"></path>
                        </svg>
                        <h5>
                            番茄白噪音
                        </h5>
                    </div>
                    <p>
                        滴答清单希望帮助您在每一个番茄工作时间中，都更加专注，为此，我们带来了好听的番茄背景音，为您营造舒心而集中的工作环境。
                    </p>
                </li>
                <li>
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                            <path
                                d="M31.6 9C44.5 9 55 19.5 55 32.4S44.5 55.8 31.6 55.8 8.2 45.3 8.2 32.4 18.7 9 31.6 9zm2 13.2h-4.1v8.2h-8.2v4.1h8.2v8.2h4.1v-8.2h8.2v-4.1h-8.2v-8.2z"
                                fill-rule="evenodd" clip-rule="evenodd" fill="#fb8142"></path>
                        </svg>
                        <h5>
                            Android 悬浮球
                        </h5>
                    </div>
                    <p>
                        任何情况下，不管您当前正在使用什么应用程序，只要您想要写点什么，悬浮球都乖乖在屏幕边缘，点击一下即可记录。
                    </p>
                </li>
            </ul>
        </div>

        <!-- 下中部升级会员界面 -->
        <div class="bottom-mid">
            <div class="container">
                <h2>
                    即刻升级到高级会员
                </h2>
                <button id="bt-btn">
                    升级
                </button>
                <p>
                    一年高级会员只需￥139（每月仅￥11.6）
                </p>
            </div>
        </div>

        <!-- 下下部帮助界面 -->
        <div class="bottom-btm">
            <div class="container">
                <div class="item">
                    <h5>
                        如何退款
                    </h5>
                    <p>
                        如果你在 Android 设备或 Web 端，使用支付宝或微信购买。可以在 Web 端对购买 14 天内的订单申请退款，超过 14 天将无法申请退款。
                        <a href="#">了解详情</a>
                    </p>
                    <br>
                    <br>
                    <p>
                        如果您通过苹果 App Store 购买，需要向苹果官方申请退款。
                        <a href="#">了解详情</a>
                    </p>
                </div>
                <div class="item">
                    <h5>
                        如何开发票
                    </h5>
                    <p>
                        您可以在 Web端 对近2个月的订单记录申请开具、查看并下载电子发票。
                    </p>
                    <br>
                    <br>
                    <p>
                        具体操作步骤如下：登录 Web端 - 点击头像 - 「设置」，在左侧边栏中点击「高级会员」-在最新订单右上角点击「发票/退款」，即可查看近期订单记录并开具发票。
                        <a href="#">了解详情</a>
                    </p>
                </div>
                <div class="item">
                    <h5>
                        高级账户到期后数据会丢吗？
                    </h5>
                    <p>
                        我们非常注重保护您的数据安全。高级账户到期后，您的数据将被完整保留，您依然可以像免费账户一样正常使用滴答清单，但不能继续享受高级账户对应的特权。
                    </p>
                </div>
                <div class="item">
                    <h5>
                        其他疑问
                    </h5>
                    <p>
                        请移步帮助中心：<span><a href="#">帮助中心</a></span>
                    </p>
                    <p>
                        或通过<span><a href="#">邮箱</a></span>联系我们
                    </p>
                </div>
            </div>
        </div>
    </main>

    <!-- 底部footer -->
    <div class="footer black">
        <div class="warpper footer-container">
            <div class="links">
                <!-- 产品、帮助等 -->
                <div class="pageLinks">
                    <!-- 产品 -->
                    <dl>
                        <dt>产品</dt>
                        <dd><a href="#">功能介绍</a></dd>
                        <dd><a href="#">下载应用</a></dd>
                        <dd><a href="#">高级会员</a></dd>
                        <dd><a href="#">教育优惠</a></dd>
                        <dd><a href="#">礼品卡</a></dd>
                    </dl>
                    <!-- 帮助 -->
                    <dl>
                        <dt>帮助</dt>
                        <dd><a href="#">帮助中心</a></dd>
                        <dd><a href="#">FAQ</a></dd>
                    </dl>
                    <!-- 资源 -->
                    <dl>
                        <dt>资源</dt>
                        <dd><a href="#">URL Scheme</a></dd>
                    </dl>
                    <!-- 团队 -->
                    <dl>
                        <dt>团队</dt>
                        <dd><a href="#">功能介绍</a></dd>
                        <dd><a href="#">功能介绍</a></dd>
                        <dd><a href="#">媒体素材</a></dd>
                    </dl>
                    <!-- 法律 -->
                    <dl>
                        <dt>法律</dt>
                        <dd><a href="#">使用条款</a></dd>
                        <dd><a href="#">隐私声明</a></dd>
                        <dd><a href="#">开源协议</a></dd>
                    </dl>

                </div>
                <!-- 切换语言 -->
                <div class="mediaLinks">
                    <ul class="languagePicker">
                        <li>中文</li>
                        <li>English</li>
                    </ul>
                    中文
                    <div class="triangle"></div>
                </div>
            </div>
            <div class="copyrightWrapper">
                <span>© 2023 杭州随笔记网络技术有限公司</span>
                <span>
                    <a href="#">浙ICP备12005180号-3</a>
                </span>
                <span>
                    <img src="./common-img/bottom-i.png" alt="">
                    <a href="#">
                        浙公网安备 33010602005056号
                    </a>
                </span>
            </div>
        </div>
    </div>

    <script src="./js/common.js"></script>
    <script src="./js/upgrade.js"></script>
</body>

</html>